@charset 'utf-8';

body { font-family: '微软雅黑', Arial; background: #fff }
.scale_img dl dt img, .scale_img li img { -o-transition: all 1s linear 0s; transition: all 1s linear 0s }
.scale_img dl:hover dt img, .scale_img li:hover img { -webkit-transform: scale(1.05) rotate(0deg) translateY(0); -ms-transform: scale(1.05) rotate(0deg) translateY(0); transform: scale(1.05) rotate(0deg) translateY(0) }

h2.main_title a { width: 1200px; margin: 0 auto; overflow: hidden; display: block; text-align: center; line-height: 0; font-size: 0; padding-top: 38px; background: url(../images/ys_tbg.png) no-repeat center top }
h2.main_title a strong { display: block; font-size: 36px; line-height: 100%; color: #26263f }
h2.main_title a span { display: block; font-size: 22px; line-height: 100%; color: #9595a4; font-weight: 400; letter-spacing: 1px; padding-top: 14px }
h2.main_title a:hover { color: #333 }

.fullSlide { position: relative; z-index: 1; clear: both; width: 100% }
.fullSlide .tempWrap { margin: 0 auto }
.fullSlide .bd { position: relative; z-index: 1; overflow: hidden; margin: 0 auto }
.fullSlide .bd .li img { display: block; width: 100%; height: auto !important }
.fullSlide .hd { position: absolute; bottom: 100px; width: 100%; height: 18px; cursor: pointer; text-align: center; z-index: 9; font-size: 0;  }
.fullSlide .hd li { display: inline-block; width: 12px; height: 12px; margin: 0 12px; opacity: 1; border-radius: 6px; background: #fff; -o-transition: all .3s ease; transition: all .3s ease }
.fullSlide .hd li.on { background: #fff; width: 46px }
.fullSlide p { display: none; position: absolute; top: 50%; width: 80px; height: 80px; z-index: 99; opacity: 1; text-align: center; margin-top: -40px; opacity: .8 }
.fullSlide .prev2 { left: 3% }
.fullSlide .next2 { right: 3% }

.seabox { height: 70px; position: relative; margin-top: -85px; z-index: 99 }
.seabox .content { background: rgba(255, 255, 255, .9); border-radius: 4px; height: 70px; padding: 0 30px 0 32px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.seabox .k_word { font-size: 14px; line-height: 70px }
.seabox .k_word strong { font-weight: 400; color: #333 }
.seabox .k_word a { color: #666; display: inline-block; margin-right: 22px; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.seabox .k_word a:hover { color: #3C72DF }
.seabox .sea_inp { width: 370px; height: 40px; background: #fff; border-radius: 20px; margin-top: 16px; margin-top: 15px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.seabox .sea_inp input { display: block; outline: 0; font-size: 14px; background: 0 0; border: 0 }
.seabox .sea_inp .search { float: left; width: 280px; height: 40px; padding-left: 20px; color: #999; background: 0 0; line-height: 40px; border: 0 }
.seabox .sea_inp .sub { float: right; width: 68px; height: 40px; background: url(../images/s_btn.png) no-repeat center; border: 0 }

.ys { background: url(../images/ys_bg.jpg) no-repeat center top; padding-top: 60px; height: 1007px }
.ys h3 { text-align: center; font-size: 0; line-height: 0; font-weight: 400 }
.ys h3 span { display: inline-block; padding: 0 28px; border: 1px solid rgba(94, 136, 255, .5); border-radius: 20px; font-size: 20px; line-height: 38px; color: #26263f; position: relative }
.ys h3 span:before, .ys h3 span:after { position: absolute; content: ""; width: 380px; height: 1px; background: rgba(94, 136, 255, .5); top: 20px }
.ys h3 span:before { left: 100% }
.ys h3 span:after { right: 100% }

.ys .software { margin: 31px 0 10px }
.ys .software h3 { margin-bottom: 34px }
.ys .software li { float: left; position: relative; width: 360px; margin-right: 60px; margin-bottom: 46px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 106px }
.ys .software li .pic { width: 60px; height: 60px; background: #5e88ff; border-radius: 50%; position: absolute; left: 14px; top: 11px }
.ys .software li .pic img { position: relative; z-index: 9 }
.ys .software li .pic:after { position: absolute; content: ""; width: 72px; height: 72px; background: #5e88ff; opacity: .3; border-radius: 50%; left: 50%; margin-left: -36px; top: 50%; margin-top: -36px }
.ys .software li .pic:before { position: absolute; content: ""; width: 84px; height: 84px; background: #5e88ff; opacity: 0; border-radius: 50%; left: 50%; margin-left: -42px; top: 50%; margin-top: -42px; -o-transition: all .3s ease-in-out; transition: all .3s ease-in-out }
.ys .software li h4 { padding-top: 30px; position: relative }
.ys .software li h4 strong { display: block; font-size: 20px; line-height: 100%; color: #333; white-space: nowrap }
.ys .software li h4 img { display: block; width: 59px; position: absolute; left: 5px; top: 0; opacity: .6 }
.ys .software li p { font-size: 15px; line-height: 24px; color: #777; margin-top: 20px }
.ys .software li:nth-child(3n) { margin-right: 0 }
.ys .software li:nth-child(2) .pic, .ys .software li:nth-child(2) .pic:after, .ys .software li:nth-child(2) .pic:before { background: #5DD0D0 }
.ys .software li:nth-child(3) .pic, .ys .software li:nth-child(3) .pic:after, .ys .software li:nth-child(3) .pic:before { background: #F8A927 }
.ys .software li:nth-child(4) .pic, .ys .software li:nth-child(4) .pic:after, .ys .software li:nth-child(4) .pic:before { background: #F28776 }
.ys .software li:nth-child(5) .pic, .ys .software li:nth-child(5) .pic:after, .ys .software li:nth-child(5) .pic:before { background: #00B7EE }
.ys .software li:nth-child(6) .pic, .ys .software li:nth-child(6) .pic:after, .ys .software li:nth-child(6) .pic:before { background: #7C5EFF }
.ys .software li:hover .pic:before { opacity: .2; 
/*animation: zoomIn1 2s infinite; -webkit-animation: zoomIn1 2s infinite*/
}
.ys .software li:hover .pic img{animation: flipInY 1.5s; -webkit-animation: flipInY 1.5s;}

.ys .hardware h3 { margin-bottom: 30px }
.ys .hardware dl { width: 360px; float: left; margin-right: 60px }
.ys .hardware dl:last-child { margin-right: 0 }
.ys .hardware dt { width: 360px; height: 200px; overflow: hidden }
.ys .hardware dt img { width: 360px; height: 200px }
.ys .hardware h4 { font-size: 20px; line-height: 48px; color: #333; border-bottom: 1px solid #ccc; position: relative }
.ys .hardware h4:after { position: absolute; content: ""; width: 40px; height: 2px; background: #5e88ff; left: 0; bottom: -1px; z-index: 2 }
.ys .hardware p { font-size: 15px; line-height: 24px; color: #777; margin-top: 20px }

.product { background: url(../images/product_bg.jpg) no-repeat center top; padding-top: 60px }
.product h2 { height: 149px }
.product h2 a { background-image: url(../images/product_tbg.png) }
.product .content { position: relative }

.pro_con h3 { padding-left: 70px; font-weight: 400 }
.pro_con h3 a { display: block }
.pro_con h3 strong { display: block; font-size: 30px; line-height: 100%; color: #0c1234; font-weight: 400 }
.pro_con h3 span { display: block; font-size: 20px; line-height: 100%; color: #0c1234; opacity: .25; text-transform: uppercase; margin-top: 12px }

.pro_info { width: 830px; height: 310px; background: rgba(255, 255, 255, .35); background: url(../images/pro_bg.png) repeat-y center top; box-shadow: 0 10px 50px 0 rgba(14, 33, 117, .1); font-size: 0; line-height: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 22px 45px 0 70px }
.pro_info strong { display: inline-block; font-size: 16px; line-height: 100%; color: #0c1234 }
.pro_info ul { height: 90px; margin: 23px 0 30px }
.pro_info ul li { float: left; width: 90px; height: 90px; background: url(../images/pro_bg1.png) no-repeat center; box-shadow: 0 10px 20px 0 rgba(14, 33, 117, .1); border-radius: 10px; margin-right: 19px; -o-transition: all .3s ease; transition: all .3s ease }
.pro_info ul li i { display: block; position: relative; width: 36px; height: 36px; overflow: hidden; margin: 16px auto 12px }
.pro_info ul li i img { width: 36px; position: absolute; left: 0; top: 0; -o-transition: all .3s ease; transition: all .3s ease }
.pro_info ul li span { display: block; font-size: 15px; line-height: 100%; color: #26263f; text-align: center; -o-transition: all .3s ease; transition: all .3s ease }
.pro_info ul li:last-child { margin-right: 0 }
.pro_info ul li:hover { background-image: url(../images/pro_bg2.png) }
.pro_info ul li:hover i img { top: -36px }
.pro_info ul li:hover span { color: #fff }
.pro_info .info2 { border-top: 1px solid rgba(169, 165, 161, .3); border-bottom: 1px solid rgba(169, 165, 161, .3); padding: 22px 0; margin-bottom: 28px }
.pro_info .info2 strong { margin-right: 44px }
.pro_info .info2 p { display: inline-block }
.pro_info .info2 span { display: inline-block; font-size: 16px; line-height: 100%; color: rgba(12, 18, 52, .7); margin-right: 35px }
.pro_info .info2 span:before { content: " · " }
.pro_info .info3 strong:first-child { margin-right: 90px }

.more { margin-left: 70px; margin-top: 30px }
.more a { display: block; width: 120px; padding-right: 38px; height: 40px; background: url(../images/more_bg1.png) no-repeat left center; border-radius: 4px 0 0 4px; font-size: 15px; line-height: 40px; color: #fff; text-align: center; -o-transition: all .3s ease; transition: all .3s ease; position: relative }
.more a:hover { font-weight: 700 }

.product1 { background: url(../images/product1_bg.jpg) no-repeat center top; padding-top: 100px; height: 760px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.product1 .pic { width: 334px; position: absolute; left: -23px; top: 0; z-index: 2 }
.product1 .pro_con { width: 927px }
.product1 .pro_con h3 { margin: 43px 0 27px }
.product1 .pro_con h3 strong, .product1 .pro_con h3 span { color: #fff }
.product1 .pro_info { width: 927px; background: rgba(14, 16, 26, .5); padding: 22px 72px 0 70px }
.product1 .pro_info strong { color: #fff }
.product1 .pro_info ul li { margin-right: 25px }
.product1 .pro_info ul li:last-child { margin-right: 0 }
.product1 .pro_info p span { color: rgba(237, 238, 245, .7) }

.product2 { background: url(../images/product2_bg.jpg) no-repeat center top; padding-top: 158px; height: 760px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.product2 .pic { width: 629px; position: absolute; left: 431px; top: 0; z-index: 2 }
.product2 .pro_con h3 { margin: 4px 0 28px; padding-left: 51px }
.product2 .pro_info { width: 600px; padding: 22px 187px 0 51px }
.product2 .more { margin-left: 51px }

.product3 { background: url(../images/product3_bg.jpg) no-repeat center top; padding-top: 150px; height: 720px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
.product3 .pic { width: 629px; position: absolute; left: -14px; top: 0; z-index: 2 }
.product3 .pro_con { width: 612px }
.product3 .pro_con h3 { margin: 26px 0 16px }
.product3 .pro_info { width: 612px }
.product3 .pro_info ul li i { width: 39px; height: 39px; margin: 14px auto 11px }
.product3 .pro_info ul li i img { width: 39px }
.product3 .pro_info ul li:hover i img { top: -39px }

.product4 { padding: 91px 0 62px; text-align: center }
.product4 li { float: left; width: 220px; height: 262px; margin-right: 25px; background: #26263F }
.product4 li a { display: block; position: relative; width: 220px; height: 262px }
.product4 li a:before { position: absolute; content: ""; width: 188px; height: 230px; border: 1px solid rgba(255, 255, 255, .5); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; top: 16px; left: 16px; z-index: 2; -o-transition: all .3s ease; transition: all .3s ease }
.product4 li a:after { position: absolute; content: ""; background: url(../images/pi.png) no-repeat center; width: 28px; height: 28px; border-radius: 50%; border: 1px solid #fff; -o-transition: all .3s ease; transition: all .3s ease; left: 95px; top: 137px }
.product4 li img { width: 220px; height: 262px; opacity: .3 }
.product4 li h3 { font-size: 20px; line-height: 30px; color: #fff; width: 100%; position: absolute; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 0 20px; top: 89px; left: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-transition: all .3s ease; transition: all .3s ease }
.product4 li:last-child { margin-right: 0 }
.product4 li:hover a:before { border-color: #5E88FF }
.product4 li:hover a:after { background-color: #5E88FF; border-color: #5E88FF }
.product4 li:hover h3 { color: #5E88FF }

.certificate { text-align: center; font-size: 0; line-height: 0; padding-bottom: 72px }
.certificate h3 { font-size: 20px; line-height: 100%; color: #333; margin-bottom: 34px }
.certificate li { display: inline-block; width: 100px; margin: 0 18px }

.power { background: url(../images/power_bg.jpg) no-repeat center top; padding-top: 63px; padding-bottom: 100px }
.power h2 a { background-image: url(../images/power_tbg.png) }
.power h2 a strong { color: #fff }
.power .gun { margin: 61px 0 51px; font-size: 0; line-height: 0; text-align: center }
.power .gun li { width: 300px; height: 75px; display: inline-block; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid rgba(255, 255, 255, .22) }
.power .gun li em { display: block }
.power .gun li i { display: inline-block; font-size: 42px; line-height: 100%; color: #fff; font-weight: 700; -o-transition: all .3s ease; transition: all .3s ease }
.power .gun li b { display: inline-block; font-size: 20px; line-height: 100%; color: #9595a4; font-weight: 400; margin-left: 8px; -o-transition: all .3s ease; transition: all .3s ease }
.power .gun li span { display: block; font-size: 22px; line-height: 100%; color: #9595a4; margin-top: 14px; -o-transition: all .3s ease; transition: all .3s ease }
.power .gun li:first-child { border-left: 1px solid rgba(255, 255, 255, .22) }
.power .gun li:hover i, .power .gun li:hover b, .power .gun li:hover span { color: #5E88FF }

.power_con { height: 500px; position: relative }
.power_con .power_nav { position: absolute; left: 0; top: 28px; width: 520px; z-index: 3 }
.power_con .power_nav li { width: 347px; height: 60px; background: #fff url(../images/power_more.png) no-repeat 305px center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding-left: 52px !important; padding-right: 52px !important; margin-bottom: 12px; overflow: hidden; cursor: pointer }
.power_con .power_nav li h3 { font-size: 20px; line-height: 60px; color: #282a41; position: relative; padding-bottom: 3px }
.power_con .power_nav li h3:after { -o-transition: all .3s ease; transition: all .3s ease; position: absolute; content: ""; width: 0; height: 2px; background: #fff; left: 0; bottom: 0 }
.power_con .power_nav li p { font-size: 15px; line-height: 32px; color: #fff; margin-top: 20px }
.power_con .power_nav li.on, .power_con .power_nav li:hover { width: 520px; height: 226px; background: #5E88FF }
.power_con .power_nav li.on h3, .power_con .power_nav li:hover h3 { color: #fff }
.power_con .power_nav li.on h3:after, .power_con .power_nav li:hover h3:after { width: 30px }
.power_con .power_list { width: 800px; height: 500px; overflow: hidden }
.power_con .power_list li { width: 800px; height: 500px }
.power_con .power_list li img { width: 800px; height: 500px }

.process { border: 20px solid #ECEEF1; height: 300px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; background: #fff; padding: 38px 55px 0; position: relative; margin-top: -57px !important; z-index: 9 }
.process h2 { padding-bottom: 15px; border-bottom: 1px solid rgba(12, 18, 52, .1); margin-bottom: 33px }
.process h2 strong { display: block; font-size: 24px; line-height: 100%; color: #0c1234 }
.process h2 span { display: block; font-size: 16px; line-height: 100%; color: #999; font-weight: 400; margin-top: 12px }
.process li { float: left; width: 12.5%; width: 88px; margin-right: 49px; text-align: center ; position:relative;}
.process li i,.process li em { display: block; position: relative; width: 54px; height: 50px; overflow: hidden; margin: 0 auto 19px;-webkit-transition: all 0.35s ease-out 0.1s;
    transition: all 0.35s ease-out 0.1s; }
.process li i {position: absolute;
    top: 0;
    left: 50%;
    margin-left: -27px;
    z-index: -1;
    opacity: 0;-webkit-transform: scale(0.5);
    transform: scale(0.5);
    -webkit-transition: all 0.1s ease 0.2s;
    transition: all 0.1s ease 0.2s;}
.process li i em { width: 54px; position: absolute; left: 0; top: 0 }
.process li i img { width: 54px; position: absolute; left: 0; top: -50px }
.process li h3 { font-size: 16px; line-height: 100%; color: #666; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
/*.process li:hover i img { animation: flipInY 1.5s; -webkit-animation: flipInY 1.5s; top: -50px }*/
.process li:hover i { visibility: visible;
    opacity: 1; -webkit-transform: scale(1);
    transform: scale(1);}
.process li:hover em {opacity: 0;
    visibility: hidden;
    -webkit-transform: translateX(100%) rotate(180deg);
    transform: translateX(100%) rotate(180deg);
}
.process li:hover h3 { color: #5E88FF }
.process li:last-child { margin-right: 0 }

.case { padding-top: 42px }
.case h2 a { background-image: url(../images/case_tbg.png) }
.case_nav { margin: 59px 0 53px; font-size: 0; line-height: 0; }
.case_nav h3 { width: 120px; height: 46px; display: inline-block; margin:0 6px; }
.case_nav h3 a { width: 120px; height: 46px; display: block; border: 1px solid rgba(191, 191, 191, .5); border-radius: 23px; text-align: center; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; font-size: 18px; line-height: 44px; color: #9595a4; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.case_nav h3 a:hover { background: url(../images/case_bg.png) no-repeat center; border-color: transparent; color: #fff }
.case_nav h3:last-child { margin-right: 0 }

.brand { background: url(../images/brand_bg.png) no-repeat center 3px; padding-bottom: 43px }
.brand li { width: 20%; float: left; opacity: 1; -o-transition: all .3s ease; transition: all .3s ease }
.brand li img { width: 219px; height: 123px; display: block; margin: 0 auto; filter: grayscale(0); -webkit-filter: grayscale(0); -o-transition: all .3s ease; transition: all .3s ease }
.brand li:nth-child(6), .brand li:nth-child(7), .brand li:nth-child(8), .brand li:nth-child(9), .brand li:nth-child(10) { margin: 35px auto }
.brand li:hover { opacity: 1 }
.brand li:hover img { filter: grayscale(1); -webkit-filter: grayscale(1) }

.news { background: #F6F6F6; padding-top: 61px; padding-bottom: 87px }
.news h2 a { background-image: url(../images/news_tbg.png) }
.news_con { margin-top: 32px }
.news_con dl { float: left; width: 390px; height: 157px; background: #fff; margin-left: 15px; position: relative; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dl:after { position: absolute; content: ""; width: 12px; height: 13px; background: url(../images/ni1.png) no-repeat center; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dt { display: none }
.news_con dl:first-child { margin-left: 0 }
.news_con dl:nth-child(3), .news_con dl:nth-child(4) { margin-bottom: 15px }
.news_con dl:nth-child(2) { margin-bottom: 20px }
.news_con dl:nth-child(3), .news_con dl:nth-child(4), .news_con dl:nth-child(6) { float: right }
.news_con dl:nth-child(3) dd, .news_con dl:nth-child(4) dd, .news_con dl:nth-child(6) dd { padding: 32px 35px 38px 136px; position: relative }
.news_con dl:nth-child(3) dd i, .news_con dl:nth-child(4) dd i, .news_con dl:nth-child(6) dd i { display: block; float: left; height: 80px; border-right: 1px solid rgba(169, 165, 161, .2); padding-right: 22px; position: absolute; left: 29px; top: 39px }
.news_con dl:nth-child(3) dd i span, .news_con dl:nth-child(4) dd i span, .news_con dl:nth-child(6) dd i span { display: block; font-size: 14px; line-height: 100%; color: #999; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dl:nth-child(3) dd i span:first-child, .news_con dl:nth-child(4) dd i span:first-child, .news_con dl:nth-child(6) dd i span:first-child { font-size: 30px; line-height: 100%; color: #999; font-weight: 700; position: relative; padding-bottom: 19px; margin-bottom: 19px }
.news_con dl:nth-child(3) dd i span:first-child:after, .news_con dl:nth-child(4) dd i span:first-child:after, .news_con dl:nth-child(6) dd i span:first-child:after { position: absolute; content: ""; width: 15px; height: 2px; background: rgba(169, 165, 161, .3); left: 0; bottom: 0 }
.news_con dl:nth-child(3) dd h4, .news_con dl:nth-child(4) dd h4, .news_con dl:nth-child(6) dd h4 { font-size: 18px; line-height: 32px; color: #333; max-height: 64px; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dl:nth-child(3) dd p, .news_con dl:nth-child(4) dd p, .news_con dl:nth-child(6) dd p { display: none }
.news_con dl:nth-child(3):after, .news_con dl:nth-child(4):after, .news_con dl:nth-child(6):after { left: 140px; bottom: 34px }
.news_con dl:nth-child(2), .news_con dl:nth-child(5) { height: 240px }
.news_con dl:nth-child(2):after, .news_con dl:nth-child(5):after { right: 41px; bottom: 36px }
.news_con dl:nth-child(2) dd, .news_con dl:nth-child(5) dd { padding: 38px 37px 0 }
.news_con dl:nth-child(2) dd h4, .news_con dl:nth-child(5) dd h4 { font-size: 18px; line-height: 32px; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dl:nth-child(2) dd p, .news_con dl:nth-child(5) dd p { font-size: 15px; line-height: 28px; color: #666; padding: 16px 0 0x;  max-height:56px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden; }
.news_con dl:nth-child(2) dd i, .news_con dl:nth-child(5) dd i { display: block; padding-top:19px;  margin-top: 13px;  border-top: 1px solid rgba(169, 165, 161, .2);}
.news_con dl:nth-child(2) dd i span, .news_con dl:nth-child(5) dd i span { display: block; font-size: 14px; line-height: 100%; color: #999; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dl:nth-child(2) dd i span:first-child, .news_con dl:nth-child(5) dd i span:first-child { font-size: 30px; line-height: 100%; color: #999; margin-bottom: 6px; font-weight: 700 }
.news_con dl:nth-child(1) { height: 500px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; padding: 93px 37px 0 }
.news_con dl:nth-child(1):after { right: 36px; bottom: 47px }
.news_con dl:nth-child(1) dt { display: block; width: 320px; height: 180px; overflow: hidden }
.news_con dl:nth-child(1) dt img { width: 320px }
.news_con dl:nth-child(1) h4 { position: absolute; font-size: 18px; line-height: 32px; color: #333; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; font-weight: 400; -o-transition: all .3s ease; transition: all .3s ease; top: 37px; left: 35px; width: 320px }
.news_con dl:nth-child(1) p { font-size: 15px; line-height: 28px; color: #666; padding: 23px 0 18px; border-bottom: 1px solid rgba(169, 165, 161, .2); margin-bottom: 24px }
.news_con dl:nth-child(1) i { display: block }
.news_con dl:nth-child(1) i span { display: block; font-size: 14px; line-height: 100%; color: #999; -o-transition: all .3s ease; transition: all .3s ease }
.news_con dl:nth-child(1) i span:first-child { font-size: 30px; line-height: 100%; color: #999; margin-bottom: 6px; font-weight: 700 }
.news_con dl:hover { box-shadow: 0 0 15px 0 rgba(35, 24, 21, .1) }
.news_con dl:hover:after { background-image: url(../images/ni2.png) }
.news_con dl:hover dd h4 { font-weight: 700; color: #333 }
.news_con dl:hover dd i span, .news_con dl:hover dd i span:first-child { color: #333 }

.about { padding-top: 61px; padding-bottom: 65px; background: url(../images/about_bg.jpg) no-repeat center; background-size:100% auto;max-width:1920px;margin:0 auto; }
.about h2 a { background-image: url(../images/about_tbg.png) }
.about h2 a strong, .about h2 a span { color: #fff }
.about_con { height: 355px; 
/*background: rgba(25, 25, 48, .5); */
padding: 37px 70px 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; text-align: center; margin-top: 31px }
.about_con h3 { font-size: 24px; line-height: 30px; color: #fff; font-weight: 400 }
.about_con p { font-size: 15px; line-height: 32px; color: #fff; margin: 27px 0 31px; opacity:.8 }
.about_con p a { color: #5E88FF }
.about_con ul { font-size: 0; line-height: 0 }
.about_con ul li { display: inline-block; width: 147px; height: 50px; margin: 0 10px }
.about_con ul li a { width: 145px; height: 48px; display: block; border: 1px solid rgba(255, 255, 255, .4); font-size: 18px; line-height: 48px; color: #fff; border-radius: 4px; -o-transition: all .3s ease; transition: all .3s ease }
.about_con ul li:hover a { border-color: #5E88FF; background: #5E88FF; color: #fff }

.links { font-size: 14px; color: rgba(12, 18, 52, .66); line-height: 40px; background: #EEE; height: 40px; overflow: hidden }
.links em { font-style: normal; font-weight: 700; display: block; float: left; color: rgba(12, 18, 52, .66) }
.links a { color: rgba(12, 18, 52, .66); margin-left: 22px; transition: .3s ease; -o-transition: .3s ease }
.links a:hover { color: #0c1234 }

@-webkit-keyframes fadeInDown1 {
  from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown1 {
  from { opacity: 0; -webkit-transform: translate3d(0, -50%, 0); transform: translate3d(0, -50%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown1 { -webkit-animation-name: fadeInDown1; animation-name: fadeInDown1 }
@-webkit-keyframes fadeInDown2 {
  from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
@keyframes fadeInDown2 {
  from { opacity: 0; -webkit-transform: translate3d(0, -20%, 0); transform: translate3d(0, -20%, 0) }
  to { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }
}
.fadeInDown2 { -webkit-animation-name: fadeInDown2; animation-name: fadeInDown2 }
@-webkit-keyframes fadeInLeft1 {
  from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft1 {
  from { -webkit-transform: translate3d(-10%, 0, 0); transform: translate3d(-10%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft1 { -webkit-animation-name: fadeInLeft1; animation-name: fadeInLeft1 }
@-webkit-keyframes fadeInLeft2 {
  from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInLeft2 {
  from { -webkit-transform: translate3d(-5%, 0, 0); transform: translate3d(-5%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInLeft2 { -webkit-animation-name: fadeInLeft2; animation-name: fadeInLeft2 }
@-webkit-keyframes fadeInRight1 {
  from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight1 {
  from { -webkit-transform: translate3d(10%, 0, 0); transform: translate3d(10%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight1 { -webkit-animation-name: fadeInRight1; animation-name: fadeInRight1 }
@-webkit-keyframes fadeInRight2 {
  from { -webkit-transform: translate3d(3%, 0, 0); transform: translate3d(3%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInRight2 {
  from { -webkit-transform: translate3d(3%, 0, 0); transform: translate3d(3%, 0, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInRight2 { -webkit-animation-name: fadeInRight2; animation-name: fadeInRight2 }
@-webkit-keyframes zoomLeft {
  from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
  50% { opacity: 1 }
}
@keyframes zoomLeft {
  from { -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3); opacity: 0 }
  50% { opacity: 1 }
}
.zoomLeft { -webkit-transform-origin: 0 50%; transform-origin: 0 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
.zoomRight { -webkit-transform-origin: 100% 50%; transform-origin: 100% 50%; -webkit-animation-name: zoomLeft; animation-name: zoomLeft }
@-webkit-keyframes fadeInUp1 {
  from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp1 {
  from { -webkit-transform: translate3d(0, 10%, 0); transform: translate3d(0, 10%, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp1 { -webkit-animation-name: fadeInUp1; animation-name: fadeInUp1 }
@-webkit-keyframes fadeInUp2 {
  from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
@keyframes fadeInUp2 {
  from { -webkit-transform: translate3d(0, 2%, 0); transform: translate3d(0, 2%, 0); opacity: 0 }
  to { -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); opacity: 1 }
}
.fadeInUp2 { -webkit-animation-name: fadeInUp2; animation-name: fadeInUp2 }
@-webkit-keyframes zoomIn1 {
  0% { opacity: 0; -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3) }
  50% { opacity: .2; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) }
  to { opacity: 0; -webkit-transform: scale3d(0.7, .7, .7); transform: scale3d(0.7, .7, .7) }
}
@keyframes zoomIn1 {
  0% { opacity: 0; -webkit-transform: scale3d(0.3, .3, .3); transform: scale3d(0.3, .3, .3) }
  50% { opacity: .2; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1) }
  to { opacity: 0; -webkit-transform: scale3d(0.7, .7, .7); transform: scale3d(0.7, .7, .7) }
}
.zoomIn1 { -webkit-animation-name: zoomIn1; animation-name: zoomIn1 }
@keyframes myfirst {
  0% { top: 0; left: 0 }
  25% { top: 10px; left: 0 }
  50% { top: 0; left: 0 }
  100% { top: 0; left: 0 }
}
@-moz-keyframes myfirst {
  0% { top: 0; left: 0 }
  25% { top: 10px; left: 0 }
  50% { top: 0; left: 0 }
  100% { top: 0; left: 0 }
}
@-webkit-keyframes myfirst {
  0% { top: 0; left: 0 }
  25% { top: 10px; left: 0 }
  50% { top: 0; left: 0 }
  100% { top: 0; left: 0 }
}
@-o-keyframes myfirst {
  0% { top: 0; left: 0 }
  25% { top: 10px; left: 0 }
  50% { top: 0; left: 0 }
  100% { top: 0; left: 0 }
}